 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">商户列表</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <div class="search-item">
            <i-input style="width: 40%" :value.sync="value" placeholder="商户ID"></i-input>
            <i-input style="width: 40%" :value.sync="value" placeholder="商户名称"></i-input>
            <i-button style="background-color: rgb(0, 150, 136); color: white;">搜索</i-button>
          </div>
        </div>
        <div class="bank-add">
          <i-button style="background-color: rgb(0, 150, 136); color: white;" @click="add">新增</i-button>
        </div>
        <div class="bank-money">
          总余额：<span>64065.04</span>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <div style="float: left;">
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator></Page> <!-- page组件 -->
            </div>
          </div>
        </div>
        <Modal
          v-model="modal"
          width="300" title="请输入新密码"
          footer-hide>
          <i-form ref="formLogin" :model="formLogin" :rules="ruleLogin" class="safety-item">
            <Form-item prop="code">
              <i-input v-model="formLogin.code" type="password" password size="large" placeholder="请输入新密码"></i-input>
            </Form-item>
            <Form-item class="btn">
              <i-button @click="ok('formLogin')" class="save" size="large">确定</i-button>
              <i-button @click="cancel" class="" size="large">取消</i-button>
            </Form-item>
          </i-form>
        </Modal>
      </div>
   </Card>

 </template>
 <script>
 let testData = {
   histories: [
     {
       merchantId: "20000029",
       merchantName: "测试秦11",
       secretKey: "HWDFXMB7GWQY7GVM8MGIOHSKOBMXOAD7LOYVK6H922VVRO2XIMQJ8VQOW9QRYI7IP8KZR4M2FCRY6YLZTEYLQYJTSPXXTPBOWIXSECLKWODXMKC0FBIN4LKDJFCUCIAS",
       balance: "999",
       rechargeRate: "0.1",
       status: "启用",
       agentId: "3",
     },
     {
       merchantId: "20000028",
       merchantName: "技术商户",
       secretKey: "C6IYX9UCFMPLN076UGQYRR3SWWDUESRSJXHR8ROOJMZGWDVVZBENSCXX9EFZBQ9MNA9JTDBKEWKYXYKIFMS8P98WXRGGMRFWZNACDVKUXPHKCJ3IKZMMUEMMRQXLUHSF",
       balance: "199.4",
       rechargeRate: "0.3",
       status: "启用",
       agentId: "",
     },
     {
       merchantId: "20000027",
       merchantName: "测试3号",
       secretKey: "MHAESCZMYV9YAUXSJ2GJA9PXUSMCUVBJHRGG6VGOTQAOZ5449A41MWAOLZFB1VMGXASFG4JZHCCWMS4Y7BXKWIYNJKUNQ42ANRHYVRPNIHH3R5UYXN0BAAETIWKL7OLW",
       balance: "10000",
       rechargeRate: "0",
       status: "启用",
       agentId: "2",
     },
     {
       merchantId: "20000026",
       merchantName: "测试",
       secretKey: "LRXDC1S0WGEWNJUHF4TYY7NRPVR4C3AB4HS3NORMGT1F8K7BVSSGOPOWCPGMNH1KY9SXYTTMYX1ZQYSAPZASUYLTLXQHTDNMTJKTKRTSKNCGIAOWOSAOODCC6SXX0IVS",
       balance: "51778.35",
       rechargeRate: "0",
       status: "启用",
       agentId: "",
     },
     {
       merchantId: "20000001",
       merchantName: "测试商户01",
       secretKey: "YK6ZM7NM5CKFR5SFAITUMDXIAV1J6FDTZS0BLANNXLRSGVGAT4UJPMSNHVXCURYRB10FFMEJNDS0HKNHRJPTJU1J0LZCYPZ7EKKUMGLBJVIKIVQNCGFRYVRDNSJXHIH3",
       balance: "1088.29",
       rechargeRate: "0",
       status: "启用",
       agentId: "2",
     },
   ]
 };

 import axios from "../../libs/axios.js";
 export default {
   name: 'merchants',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       formLogin:{
         code: ''
       },
       ruleLogin:{
         code:[
           {
             required: true,
             message: '8-16位字母和数字组合,且至少2位数字',
             trigger: 'blur'
           }
         ]
        },
       value: '',
       ajaxHistoryData: [],
       exportdata: [],
       // 初始化信息总条数
       dataCount: 0,
       // 每页显示多少条
       pageSize: 10,
       pageCurrent: 1,//当前页
       foodColumns: [
         {
           type: 'selection',
           width: 60,
           align: 'center',
           fixed: 'left'
         },
         {
           title: "商户ID",
           key: "merchantId"
         },
         {
           title: "商户名称",
           key: "merchantName"
         },
         {
           title: "秘钥",
           key: "secretKey"
         },
         {
           title: "余额",
           key: "balance"
         },
         {
           title: "充值率",
           key: "rechargeRate"
         },
         {
           title: "状态",
           key: "status"
         },
         {
           title: "代理商ID",
           key: "agentId"
         },
         {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
                        return h("div", [
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                height: '22px',
                                padding: '0 5px',
                                marginLeft:'2px',
                                fontSize: '12px'
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'mer-change'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "登录系统"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                height: '22px',
                                padding: '0 5px',
                                marginLeft:'2px',
                                fontSize: '12px'
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'mer-view'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "查看信息"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                height: '22px',
                                marginLeft:'2px',
                                padding: '0 5px',
                                fontSize: '12px'
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'mer-dispatch'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "代付调度"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                height: '22px',
                                padding: '0 5px',
                                marginLeft:'2px',
                                fontSize: '12px'
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'mer-change'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "余额变更"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                height: '22px',
                                marginLeft:'2px',
                                padding: '0 5px',
                                fontSize: '12px'
                              },
                              on: {
                                click: () => {
                                  this.modal=true;
                                }
                              }
                            },
                            "重置密码"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: 'white',
                                padding: '0 5px',
                                height: '24px',
                                fontSize: '12px',
                                backgroundColor: "#009688",
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'mer-edit'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "编辑"
                          )
                        ]);
                      }
         }
       ],
       foodData: [],
       modal:false
     };
   },
   methods: {
     //表单验证
     ok () {
       this.$refs['formLogin'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           this.modal = false;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     cancel () {
       this.$Message.info('Clicked cancel');
       this.modal = false;
     },
     // 获取历史记录信息
     handleListApproveHistory() {
       // 保存取到的所有数据
       this.ajaxHistoryData = testData.histories;
       this.exportdata = testData.histories;
       this.dataCount = testData.histories.length;
       // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
       if (testData.histories.length < this.pageSize) {
         this.foodData = this.ajaxHistoryData;
       } else {
         this.foodData = this.ajaxHistoryData.slice(0, this.pageSize);
       }
     },
     // 点击切换页面
     changepage(index) {
       //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
       let _start = (index - 1) * this.pageSize;
       //需要显示结束数据的index
       let _end = index * this.pageSize;
       //截取需要显示的数据
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //储存当前页
       this.pageCurrent = index;
     },
     //每页显示的数据条数
     nowPageSize(index) {
       let _start = (this.pageCurrent - 1) * index;
       let _end = this.pageCurrent * index;
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //实时获取当前需要显示的条数
       this.pageSize = index;
     },
     //新增
     add(){
       this.$router.push({name:'mer-add'})
     }
   },
   created() {
     this.handleListApproveHistory();
   }
 };
 </script>
 <style lang="less">
   //模态框垂直居中
   .ivu-modal-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
     .ivu-modal{
        top: 0;
     }
   }
   .btn{
     margin-top: 40px;
     text-align: right;
   }

   .ivu-table-cell{
     padding-left: 7px;
     padding-right: 7px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-all;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
   }
     .content-con{
       margin: 15px;
       .bank-search{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
         .search-item{
           display: flex;
           justify-content: space-between;
         }
       }
       .bank-add{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
         margin-bottom: 10px;
       }
       .bank-money{
         line-height: 38px;
         span{
           color: #4daa5d;
           font-weight: bold;
         }
       }
     }
 </style>
